<script setup lang="ts">
import { ref } from 'vue'
import PDFUploader from './PDFUploader.vue'
import axios from 'axios'
import PDF from "pdf-vue3";

const srcPdf = ref("")
const translating = ref(false)
const translatePdf = ref("")
const language = ref('zh')
const leftdoc = ref(null)
const rightdoc = ref(null)

const handleUploaded = async (filename: any) => {
  srcPdf.value = `/api/download/${filename}`
  translating.value = true
  console.log(leftdoc)
  const response = await axios.get(`/api/translate/${filename}/${language.value}`, {timeout: 10 * 60 * 1000});
  translatePdf.value = `/api/download/${response.data}`
  translating.value = false
}

const handlePdfInit = (pdf: any) => {
  console.log(pdf);
};

</script>

<template>
    <div class="outer">
      <PDFUploader @fileUploaded="handleUploaded"></PDFUploader>
      目标语言：
      <el-radio-group v-model="language">
        <el-radio value="zh">中文</el-radio>
        <el-radio value="de">德语</el-radio>
        <el-radio value="fr">法语</el-radio>
        <el-radio value="ko">韩语</el-radio>
        <el-radio value="ja">日语</el-radio>
      </el-radio-group>
      <div class="main-container">
        <div class="left-pdf">
          <PDF :src="srcPdf" ref="leftdoc" @on-pdf-init="handlePdfInit"/>
        </div>
        <div
           class="right-pdf"
           ref="rightdoc"
           v-loading="translating"
           element-loading-text="正在翻译..."
           :element-loading-spinner="svg"
           element-loading-svg-view-box="-10, -10, 50, 50"
           element-loading-background="rgba(255, 255, 255, 0.8)">
          <PDF :src="translatePdf"/>
        </div>
      </div>
    </div>
</template>
<style>
.outer {
  height: 100%;
  width: 100%;
  padding: 10px;
}
.main-container {
  width: 100%;
  height: calc(100vh - 180px);
  padding: 10px;
}
.left-pdf {
  width: 50%;
  float: left;
  padding: 5px;
  height: 100%;
  border: 1px solid #6c757d;
}
.right-pdf {
  width: 50%;
  float: left;
  padding: 5px;
  height: 100%;
  border: 1px solid #606c88;
}
</style>